<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="ctn">
        <div class="boxl">
            <div class="box1">
             <div class="boxz1">校园风光</div>
             <div class="boxz2">xiao yuan feng guang</div>
            </div>
            <div class="box2"></div>
        </div>
        <div class="boxr">
            <div class="boxrs">
                <div class="box3"></div>
                <div class="box4">
                    <div class="boxz3">学术研究</div>
                    <div class="boxz4">xue shu yan jiu</div>
                </div>
                <div class="box5"></div>
            </div>
            <div class="boxrx">
                <div class="box6">
                    <div class="boxz5">学生活动</div>
                    <div class="boxz6">xue sheng huo dong</div>
                </div>
                <div class="box7"></div>
                <div class="box8"></div>
            </div>
        </div>
    </div>
</body>
<style>
    .ctn{
        width: 1200px;
        height: 417px;
        background-color: aqua;
        margin: auto;
    }
    .boxl{
        width: 289px;
        height: 417px;
        background: white;
        float: left;
    }
    .boxr{
        width: 911px;
        height: 417px;
        background: white;
        float: left;
    }
    .box1{
        width: 289px;
        height: 188px;
        background:red;
        color: aliceblue;
        font-weight: 800;
        font-size: 35px;
        padding-top: 40px;
        padding-left: 40px;
        box-sizing: border-box;
    }
    .boxz1{

    }
    .boxz2{
        font-size: 15px;
        font-style: italic;
    }
    .box2{
        width: 289px;
        height: 229px;
        background:white;
        float: left;
        background-image: url("https://www.pdsu.edu.cn/images/fgt12.jpg");
    }
    .boxrs{
        width: 911px;
        height: 248px;
        background:white;
        float: left;
    }
    .boxrx{
        width: 911px;
        height: 169px;
        background:white;
        float: left;
    }
    .box3{
        width: 543px;
        height: 248px;
        background:white;
        float: left;
        background-image: url("https://www.pdsu.edu.cn/images/fgt11.jpg");
    }
    .box4{
        width: 144px;
        height: 248px;
        background:goldenrod;
        float: left;
        color: aliceblue;
        font-weight: 800;
        font-size: 35px;
        padding-top: 40px;
        padding-left: 40px;
        box-sizing: border-box;
        writing-mode: vertical-rl;
        
    }
    .boxz3{

    }
    .boxz4{
        font-size: 15px;
        font-style: italic;
    }
    .box5{
        width: 213px;
        height: 248px;
        background:white;
        float: left;
        background-image:url("//www.pdsu.edu.cn/images/1.JPG");
    }
    .box6{
        width: 294px;
        height: 169px;
        background:teal;
        float: left;
        color: aliceblue;
        font-weight: 800;
        font-size: 35px;
        padding-top: 40px;
        padding-left: 40px;
        box-sizing: border-box;
    }
    .boxz5{

    }
    .boxz6{
        font-size: 15px;
        font-style: italic;
    }
    .box7{
        width: 303px;
        height: 169px;
        background:yellowgreen;
        float: left;
        background-image: url("https://www.pdsu.edu.cn/images/fgt14.jpg");
    }
    .box8{
        width: 303px;
        height: 169px;
        background:navajowhite;
        background-image: url("https://www.pdsu.edu.cn/images/fgt13.jpg");
        float: left;
    }

</style>
</html>